<template>
  <div style="width: 60%; margin: 1% 20% 1% 20%;">
    <div style="background-color: #fff;padding: 10px 0 10px 0;border-radius: 10px">
      <p id="insertp"><span v-html="description"></span></p>
      <!-- <p><span>2：巴拉巴拉一大堆巴拉巴拉一大堆巴拉巴拉一大堆巴拉巴拉一大堆巴拉巴拉一大堆巴拉巴拉一大堆巴拉巴 拉一大堆大堆巴拉巴拉一大堆巴拉拉巴拉一大堆巴拉巴拉一大堆巴拉巴拉一大堆巴拉巴拉一大堆巴拉巴拉一大堆巴拉巴拉拉巴拉一大堆巴拉巴拉一大堆巴拉巴拉一大堆巴拉巴拉一大堆巴拉巴拉一大堆巴拉巴拉</span></p> -->
      <!-- <p><span>3：巴拉巴拉一大堆巴拉巴拉一大堆巴拉巴拉一大堆巴拉巴拉一大堆巴拉巴拉一大堆巴拉巴拉一大堆巴拉巴 拉一大堆大堆巴拉巴拉一大堆巴拉拉巴拉一大堆巴拉巴拉一大堆巴拉巴拉一大堆巴拉巴拉一大堆巴拉巴拉一大堆巴拉巴拉拉巴拉一大堆巴拉巴拉一大堆巴拉巴拉一大堆巴拉巴拉一大堆巴拉巴拉一大堆巴拉巴拉</span></p> -->
    </div>
    <div
      style="margin-top: 40px"
      class="listBox"
    >
      <div
        v-for="(item,index) in list"
        :key="index"
        class="orderbook"
        style="float: left;"
      >
        <div class="bookimg"><img :src="item.image" /></div>
        <el-link @click="handleClick(1)"><router-link :to='{path:"/pages/orderpage",query:{item}}'>进入订阅</router-link></el-link>
      </div>
    </div>
  </div>
</template>
<script>
import { journaldata } from '../../api/basisMG'
export default {
  name: 'select-index',
  data() {
    return {
      bookimg1: '',
      bookimg2: '',
      bookimg3: '',
      description: '',
      list: []
    }
  },
  created() {
    this.getData()
    window.data = this
  },
  methods: {
    async getData() {
      const res = await journaldata()
      this.description = res.data.description
      this.list = res.data.magazine

    },
    handleClick(a) {

    }

  }
}
</script>

<style lang="scss" scoped>
.listBox {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  justify-content: space-between;
}
p {
  margin: 10px 3% 5px 3%;
}
.orderbook {
  margin-bottom: 10px;
  height: 400px;
  width: 30%;
  background-color: #fff;
  font-size: 15px;
  color: #ba1a24;
  border-radius: 0 0 10px 10px;
}
.bookimg {
  border-radius: 0 0 10px 10px;
  height: 340px;
}
.bookimg > img {
  width: 100%;
  height: 100%;
}
.el-link {
  font-size: 18px;
  font-weight: 400;
  width: 100%;
  margin-top: 4%;
}
.el-link.el-link--default {
  color: #ba1a24;
}
.el-link.is-underline:hover:after {
  border: 0;
}
</style>
